<template>
  <div class="dialogBox">
    <el-dialog
      v-model="props.dialogVisible"
      v-if="props.dialogVisible"
      :title="title"
      width="50%"
      :before-close="closeDialog"
    >
      <!-- 盒子主体 -->
      <div class="dialoBox-body">
        <!-- 信息头部 用于切换 -->
        <el-tabs v-model="modeInfo" type="card" class="demo-tabs">
          <el-tab-pane label="基本信息" name="first">
            <div class="info-body">
              <div class="info-body-top">
                <div class="left-info">
                  <span class="info-title">{{ state.viewObj.modelName || '---' }}</span>
                  <div class="info-row">
                    <span class="row-font-title">模型类型</span>
                    <span class="row-font-content">{{
                      handleModelType(state.viewObj.modelType)
                    }}</span>
                  </div>
                  <div class="info-row info-flex">
                    <div class="info-row-item">
                      <span class="row-font-title">模型版本号</span>
                      <span class="row-font-content">{{ state.viewObj.version || '---' }}</span>
                    </div>
                    <div class="info-row-item">
                      <span class="row-font-title">模型单位</span>
                      <span class="row-font-content">{{ state.viewObj.unit || '---' }}</span>
                    </div>
                  </div>
                  <div class="info-row">
                    <span class="row-font-title">模型说明</span>
                    <span class="mode-explain">{{ state.viewObj.modelDesc || '---' }}</span>
                  </div>
                  <div class="info-row">
                    <span class="row-font-title">注册时间</span>
                    <span class="row-font-content">{{ state.viewObj.createTime || '---' }}</span>
                  </div>
                </div>
                <div class="right-img">
                  <div class="img-box">
                    <el-image
                      v-if="imgFlag === 1 && state.viewObj.sketchUrl"
                      :src="state.viewObj.sketchUrl"
                      :preview-src-list="[state.viewObj.sketchUrl]"
                    />
                    <el-image
                      v-else-if="imgFlag === 2 && state.viewObj.genUrl"
                      :src="state.viewObj.genUrl"
                      :preview-src-list="[state.viewObj.genUrl]"
                    />

                    <div v-else class="no-img">暂无图片...</div>
                  </div>
                  <div class="img-btn">
                    <span :class="imgFlag === 1 ? 'btn-active' : 'img-btn-itme'" @click="tabsImg(1)"
                      >模型示意图</span
                    >
                    <span :class="imgFlag === 2 ? 'btn-active' : 'img-btn-itme'" @click="tabsImg(2)"
                      >模型概化图</span
                    >
                  </div>
                </div>
              </div>
              <div class="info-body-bottom">
                <div class="btm-item" v-for="(item, index) in state.seeArr" :key="index">
                  <span class="item-title">{{ item.seeText }}</span>
                  <div class="item-body">
                    <el-input v-model="item.inpt" type="textarea" placeholder="暂无信息" disabled>
                    </el-input>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="使用概况" name="second">
            <div class="info-body">
              <div class="survey-box">
                <div class="survey-box-item">
                  <span class="item-name">累计调用次数：</span>
                  <!-- <span class="item-content">{{ state.viewObj?.useInfo?.runtime || '---' }}</span> -->
                  <span class="item-content"> {{ modelOverview?.tnum || 0 }} 次</span>
                </div>
                <div class="survey-box-item">
                  <span class="item-name">成功调用次数：</span>
                  <!-- <span class="item-content">{{ state.viewObj?.useInfo?.callsNum || '---' }}</span> -->
                  <span class="item-content"> {{ modelOverview?.snum || 0 }} 次</span>
                </div>
                <div class="survey-box-item">
                  <span class="item-name">失败调用次数：</span>
                  <!-- <span class="item-content">{{ state.viewObj?.useInfo?.callsNum || '---' }}</span> -->
                  <span class="item-content"> {{ modelOverview?.fnum || 0 }} 次 </span>
                  <!-- <span class="item-name">最大耗时：</span>
       
                  <span class="item-content">
                    {{ Number(modelOverview?.maxTime).toFixed(2) || '0' }} s
                  </span> -->
                </div>
                <div class="survey-box-item">
                  <span class="item-name">成功率：</span>
                  <!-- <span class="item-content">{{ state.viewObj?.useInfo?.callsNum || '---' }}</span> -->
                  <span class="item-content"> {{ modelOverview?.success || 0 }} % </span>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="模型评价" name="third">
            <div class="info-body">
              <div class="model-evaluate">
                <!-- <div class="evaluate-item" v-for="(item, index) in state.viewObj?.evaluate" :key="index"> -->
                <div class="evaluate-item">
                  <div class="item-left">
                    <div class="item-left-font">
                      <!-- {{ item.content || '模型适合大汶河流域，预报等级甲级' }} -->
                      {{ '模型适合大汶河流域，预报等级甲级' }}
                    </div>
                    <div class="user-info">
                      <!-- <span class="info-font">{{ item.user || '---' }}</span>
                      <span class="info-font">{{ item.time || '---' }}</span> -->
                      <span class="info-font">管理员</span>
                      <span class="info-font">2022-10-18 10:16</span>
                    </div>
                  </div>
                  <div class="item-right">
                    <span class="item-right-font">评分</span>
                    <!-- <span class="item-right-font">{{ item.score || '---' }}</span> -->
                    <span class="item-right-font">9.2</span>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import emitter from '@/utils/bus'
import { ref, reactive, onMounted } from 'vue'
// import { getModelAssetURL } from '@/utils/loadAssets'
import { getModelType } from '@/services/modules/home'
//接口
import { modelEfficiency, modelStability } from '@/services/modules/model-exam'
const modeInfo = ref('first')
const state = reactive({
  viewObj: {},
  seeArr: []
})
const modelOverview = ref({})
let typeArr = ref([])
onMounted(async () => {
  initData()
})
const props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: '模型信息'
  }
})
const emit = defineEmits(['closeDialog'])
const closeDialog = () => {
  modeInfo.value = 'first'
  imgFlag.value = 1
  state.viewObj = {}
  emit('closeDialog', false)
}
emitter.on('goView', (modeObj) => {
  modelOverview.value = {}
  state.viewObj = modeObj
  state.seeArr = [
    { seeText: '模型参数', inpt: regStr(modeObj.params) },
    { seeText: '参数说明', inpt: regStr(modeObj.paramsDesc) },
    { seeText: '模型输入', inpt: regStr(modeObj.inData) },
    { seeText: '模型输出', inpt: regStr(modeObj.outData) },
    { seeText: '模型适应性说明', inpt: regStr(modeObj.suitability) }
  ]
  // debugger
  modelStability({
    pageNum: 1,
    pageSize: 10,
    modelName: modeObj.id,
    modelType: modeObj.modelType,
    month: new Date().getMonth() + 1,
    year: new Date().getFullYear() + ''
  }).then((res) => {
    if (res.code === 200) {
      modelOverview.value = res.data.instructions
    }
  })
})
const imgFlag = ref(1)
const tabsImg = (value) => {
  imgFlag.value = value
}
//切换
function handleClick() {}
const regStr = (value) => {
  return value ? value.replace(/\\n/g, '\n') : ''
}

// 获取模型类型
function initData() {
  return new Promise((resolve, reject) => {
    getModelType().then((res) => {
      if (res.code === 200) {
        // 获取所有模型类型
        typeArr.value = res.data.reduce((acc, cur) => {
          return [...acc, ...cur.types]
        }, [])
      }
    })
  })
}
// 检索模型类型
function handleModelType(val) {
  if (typeArr.value?.length > 0) {
    let arr = typeArr.value.filter((item) => {
      return item.typeId == val
    })
    return arr[0]?.typeName || '--'
  }
}
</script>

<style lang="less" scoped>
.dialogBox {
  :deep(.el-dialog__header) {
    border-bottom: 1px solid rgb(14, 13, 13);
  }
  .dialoBox-body {
    width: 100%;
    height: 600px;
    .info-heard {
      display: flex;
      height: 30px;
      box-sizing: border-box;
      padding: 0 20px;
      .info-heard-btn {
        padding: 0 20px;
        box-sizing: border-box;
        margin-right: 20px;
        font-size: 17px;
        font-weight: 600;
        cursor: pointer;
      }
      .active {
        border-bottom: 1px solid blue;
        color: blue;
      }
    }
    .info-body {
      height: 100%;
      font-size: var(--content-fontsize);
      // 第一个
      .info-body-top {
        padding: 0 20px;
        width: 100%;
        height: 290px;
        box-sizing: border-box;
        display: flex;
        .left-info {
          width: 58%;
          height: 100%;
          .info-title {
            font-size: 18px;
            font-weight: 600;
            display: inline-block;
          }
          .info-row {
            margin-top: 15px;
            display: flex;
            .row-font-title {
              margin-right: 40px;
            }
            .mode-explain {
              display: inline-block;
              width: 350px;
              height: 80px;
              line-height: 20px;
              overflow-y: auto;
            }
          }
          .info-flex {
            display: flex;
            justify-content: space-between;
            .info-row-item {
              margin-right: 100px;
              .row-font-title {
                margin-right: 25px;
              }
            }
          }
        }
        .right-img {
          margin-left: 10px;
          width: 40%;
          height: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          .img-box {
            width: 350px;
            height: 240px;
            border: 1px solid rgba(85, 85, 85, 1);
            .el-image {
              width: 350px;
              height: 240px;
            }
            .no-img {
              width: 100%;
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              // color: white;
              color: black;
            }
          }
          .img-btn {
            width: 220px;
            height: 35px;
            line-height: 35px;
            display: flex;
            justify-content: space-around;
            .img-btn-itme {
              cursor: pointer;
            }
            .btn-active {
              cursor: pointer;
              color: #35ade8;
            }
          }
        }
      }
      .info-body-bottom {
        display: flex;
        width: 100%;
        height: calc(100% - 290px);
        justify-content: space-between;

        .btm-item {
          width: 160px;
          .item-body {
            height: 220px;
            margin-top: 10px;
            :deep(.el-textarea__inner) {
              height: 220px;
            }
            :deep(.el-textarea__inner) {
              resize: none;
            }
          }
        }
      }
      // 第二个
      .survey-box {
        margin-top: 20px;
        width: 100%;
        height: 550px;
        box-sizing: border-box;
        padding: 0 20px;
        .survey-box-item {
          margin-bottom: 15px;
          color: rgba(85, 85, 85, 1);
          .item-name {
            display: inline-block;
            width: 140px;
            margin-right: 40px;
          }
        }
      }
      // 第三个
      .model-evaluate {
        padding: 0 20px;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        overflow-y: auto;
        .evaluate-item {
          margin-top: 20px;
          display: flex;
          justify-content: space-between;
          .item-left {
            width: 580px;
            height: auto;
            .item-left-font {
              padding: 5px;
              box-sizing: border-box;
              width: 580px;
              height: auto;
              line-height: 25px;
            }
            .user-info {
              padding: 5px;
              height: 30px;
              width: 300px;
              box-sizing: border-box;
              justify-content: space-between;
              line-height: 30px;
              display: flex;
            }
          }
          .item-right {
            width: 150px;
            height: 100px;
            .item-right-font {
              margin-right: 20px;
              font-size: 18px;
              font-weight: 600;
            }
          }
        }
      }
    }
  }
}
</style>
